<template>
    <div>
        <FormProvider :form="form" ref="viewport">
            <FormLayout :labelCol="8" :wrapperCol="24" size="default" :gridRowGap="8" layout="inline">
                <SchemaField :schema="schema" />
            </FormLayout>
        </FormProvider>
    </div>
</template>


<script>
import { schema } from './schema'
import { createForm, onFormValuesChange, onFieldValueChange } from "@formily/core";
import { createSchemaField, FormProvider } from "@formily/vue";
import {
    FormLayout,
    FormItem,
    Input,
    FormGrid,
    InputNumber,
    Radio,
} from "@formily/element";
const { SchemaField } = createSchemaField({
    components: {
        FormLayout,
        FormItem,
        Input,
        FormGrid,
        InputNumber,
        Radio,
    },
});
export default {
    components: {
        FormProvider,
        FormLayout,
        SchemaField,
    },
    data() {
        const _this = this;
        this.scale = this.$store.state.baseConfig.scale
        const form = createForm({
            initialValues: {
                scale: this.scale * 100
            },
            effects() {
                onFormValuesChange((form) => {
                    _this.$bus.$emit('scale', form.getValuesIn('scale') / 100);
                    // _this.$bus.$off('scale')

                });
                onFieldValueChange("attachment", (field) => {
                });

            },

        });
        return {
            scale: 0,
            form,
            schema
        }
    },
    mounted() {
        let device = ''
        switch (navigator.platform) {
            case 'Win32':
                device = 'PC';
                break;
            default:
                device = 'MOBILE';
                break;
        }
        this.form.setValuesIn('device', device)
        this.$bus.$on('scale', (e) => {
            this.form.setValuesIn('scale', (e * 100).toFixed(2))
        })
    },
    methods: {

    },
    beforeDestroy() {
        this.$bus.$off('scale')
    }
}
</script>

<style>

</style>